<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  <meta name="description" content="along&#39;s blog">
  <meta name="keyword" content="hexo-theme, vuejs">
  
    <link rel="shortcut icon" href="/css/images/logo.png">
  
  <title>
    
      vue3语法 | ALONG
    
  </title>
  <link href="/cdn.along/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="/cdn.along/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
  <link href="/cdn.along/highlight.js/9.12.0/styles/tomorrow.min.css" rel="stylesheet">
  
<link rel="stylesheet" href="/css/style.css">

  
  <script src="/cdn.along/jquery/3.2.1/jquery.min.js"></script>
  <script src="/cdn.along/geopattern/1.2.3/js/geopattern.min.js"></script>
  <script src="/cdn.along/nprogress/0.2.0/nprogress.min.js"></script>
  
    
<script src="/js/qrious.js"></script>

  
  
  
  
    <!-- MathJax support START -->
    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
        tex2jax: {
          inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
          processEscapes: true,
          skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
        }
      });
    </script>

    <script type="text/x-mathjax-config">
      MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax(), i;
        for (i=0; i < all.length; i += 1) {
          all[i].SourceElement().parentNode.className += ' has-jax';
        }
      });
    </script>
    <script type="text/javascript" src="/cdn.along/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
    <!-- MathJax support END -->
  


  
  
    
<script src="/js/local-search.js"></script>


<meta name="generator" content="Hexo 5.4.0"></head>
<div class="wechat-share">
  <img src="/css/images/logo.png" />
</div>
  <body>
    <header class="header fixed-header">
  <div class="header-container">
    <a class="home-link" href="/">
      <div class="logo"></div>
      <span>ALONG</span>
    </a>
    <ul class="right-list">
      
        <li class="list-item">
          
            <a href="/" class="item-link">Home</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/tags/" class="item-link">Tags</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/archives/" class="item-link">Archives</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/about/" class="item-link">About</a>
          
        </li>
      
      
        <li class="menu-item menu-item-search right-list">
    <a role="button" class="popup-trigger">
        <i class="fa fa-search fa-fw"></i>
    </a>
</li>
      
    </ul>
    <div class="menu">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </div>
    <div class="menu-mask">
      <ul class="menu-list">
        
          <li class="menu-item">
            
              <a href="/" class="menu-link">Home</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/tags/" class="menu-link">Tags</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/archives/" class="menu-link">Archives</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/about/" class="menu-link">About</a>
            
          </li>
        
      </ul>
    </div>
    
      <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
            <span class="search-icon">
                <i class="fa fa-search"></i>
            </span>
            <div class="search-input-container">
                <input autocomplete="off" autocapitalize="off"
                    placeholder="Please enter your keyword(s) to search." spellcheck="false"
                    type="search" class="search-input">
            </div>
            <span class="popup-btn-close">
                <i class="fa fa-times-circle"></i>
            </span>
        </div>
        <div id="search-result">
            <div id="no-result">
                <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
            </div>
        </div>
    </div>
</div>
    
  </div>
</header>

    <div id="article-banner">
  <h2>vue3语法</h2>
  <p class="post-date">2021-06-12</p>
  <div class="arrow-down">
    <a href="javascript:;"></a>
  </div>
</div>
<main class="app-body flex-box">
  <!-- Article START -->
  <article class="post-article">
    <section class="markdown-content"><h3 id="插槽"><a href="#插槽" class="headerlink" title="插槽"></a>插槽</h3><h4 id="后备内容"><a href="#后备内容" class="headerlink" title="后备内容"></a>后备内容</h4><p>我们可能希望这个 插槽 内绝大多数情况下都渲染文本“Submit”。为了将“Submit”作为后备内容，我们可以将它放在 slot 标签内：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;button type=<span class="string">&quot;submit&quot;</span>&gt;</span><br><span class="line">  &lt;slot&gt;Submit&lt;/slot&gt;</span><br><span class="line">&lt;/button&gt;</span><br></pre></td></tr></table></figure>

<h4 id="具名插槽"><a href="#具名插槽" class="headerlink" title="具名插槽"></a>具名插槽</h4><p>有时我们需要多个插槽。例如对于一个带有如下模板的 <code>&lt;base-layout&gt;</code> 组件：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;container&quot;</span>&gt;</span><br><span class="line">  &lt;header&gt;</span><br><span class="line">    &lt;!-- 我们希望把页头放这里 --&gt;</span><br><span class="line">  &lt;/header&gt;</span><br><span class="line">  &lt;main&gt;</span><br><span class="line">    &lt;!-- 我们希望把主要内容放这里 --&gt;</span><br><span class="line">  &lt;/main&gt;</span><br><span class="line">  &lt;footer&gt;</span><br><span class="line">    &lt;!-- 我们希望把页脚放这里 --&gt;</span><br><span class="line">  &lt;/footer&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>

<p>对于这样的情况，<code>&lt;slot&gt;</code> 元素有一个特殊的 <code>attribute：name</code>。这个 <code>attribute</code> 可以用来定义额外的插槽：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;container&quot;</span>&gt;</span><br><span class="line">  &lt;header&gt;</span><br><span class="line">    &lt;slot name=<span class="string">&quot;header&quot;</span>&gt;&lt;/slot&gt;</span><br><span class="line">  &lt;/header&gt;</span><br><span class="line">  &lt;main&gt;</span><br><span class="line">    &lt;slot&gt;&lt;/slot&gt;</span><br><span class="line">  &lt;/main&gt;</span><br><span class="line">  &lt;footer&gt;</span><br><span class="line">    &lt;slot name=<span class="string">&quot;footer&quot;</span>&gt;&lt;/slot&gt;</span><br><span class="line">  &lt;/footer&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>

<p>一个不带 name 的 <code>&lt;slot&gt;</code> 出口会带有隐含的名字<code>“default”</code>。</p>
<p>在向具名插槽提供内容的时候，我们可以在一个 <code>&lt;template&gt;</code> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&lt;base-layout&gt;</span><br><span class="line">  &lt;template v-slot:header&gt;</span><br><span class="line">    &lt;h1&gt;Here might be a page title&lt;/h1&gt;</span><br><span class="line">  &lt;/template&gt;</span><br><span class="line"></span><br><span class="line">  &lt;template v-slot:<span class="keyword">default</span>&gt;</span><br><span class="line">    &lt;p&gt;A paragraph <span class="keyword">for</span> the main content.&lt;/p&gt;</span><br><span class="line">    &lt;p&gt;And another one.&lt;/p&gt;</span><br><span class="line">  &lt;/template&gt;</span><br><span class="line"></span><br><span class="line">  &lt;template v-slot:footer&gt;</span><br><span class="line">    &lt;p&gt;Here<span class="string">&#x27;s some contact info&lt;/p&gt;</span></span><br><span class="line"><span class="string">  &lt;/template&gt;</span></span><br><span class="line"><span class="string">&lt;/base-layout&gt;</span></span><br></pre></td></tr></table></figure>


<h4 id="作用域插槽"><a href="#作用域插槽" class="headerlink" title="作用域插槽"></a>作用域插槽</h4><p>有时让插槽内容能够访问子组件中才有的数据是很有用的。当一个组件被用来渲染一个项目数组时，这是一个常见的情况，我们希望能够自定义每个项目的渲染方式。</p>
<p>例如，我们有一个组件，包含 <code>todo-items</code> 的列表。</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">app.component(<span class="string">&#x27;todo-list&#x27;</span>, &#123;</span><br><span class="line">  data() &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      items: [<span class="string">&#x27;Feed a cat&#x27;</span>, <span class="string">&#x27;Buy milk&#x27;</span>]</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;ul&gt;</span></span><br><span class="line"><span class="string">      &lt;li v-for=&quot;(item, index) in items&quot;&gt;</span></span><br><span class="line"><span class="string">        &#123;&#123; item &#125;&#125;</span></span><br><span class="line"><span class="string">      &lt;/li&gt;</span></span><br><span class="line"><span class="string">    &lt;/ul&gt;</span></span><br><span class="line"><span class="string">  `</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>要使 item 可用于父级提供的 slot 内容，我们可以添加一个 <code>&lt;slot&gt;</code> 元素并将其绑定为属性：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;ul&gt;</span><br><span class="line">  &lt;li v-<span class="keyword">for</span>=<span class="string">&quot;( item, index ) in items&quot;</span>&gt;</span><br><span class="line">    &lt;slot :item=<span class="string">&quot;item&quot;</span>&gt;&lt;/slot&gt;</span><br><span class="line">  &lt;/li&gt;</span><br><span class="line">&lt;/ul&gt;</span><br></pre></td></tr></table></figure>

<p>绑定在 <code>&lt;slot &gt;</code> 元素上的 <code>attribute</code> 被称为插槽 <code>prop</code>。现在在父级作用域中，我们可以使用带值的 <code>v-slot</code> 来定义我们提供的插槽 <code>prop</code> 的名字：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;todo-list&gt;</span><br><span class="line">  &lt;template v-slot:<span class="keyword">default</span>=<span class="string">&quot;slotProps&quot;</span>&gt;</span><br><span class="line">    &lt;i <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;fas fa-check&quot;</span>&gt;&lt;/i&gt;</span><br><span class="line">    &lt;span <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;green&quot;</span>&gt;&#123;&#123; slotProps.item &#125;&#125;&lt;/span&gt;</span><br><span class="line">  &lt;/template&gt;</span><br><span class="line">&lt;/todo-list&gt;</span><br></pre></td></tr></table></figure>

<h4 id="结构插槽prop"><a href="#结构插槽prop" class="headerlink" title="结构插槽prop"></a>结构插槽prop</h4><p>作用域插槽的内部工作原理是将你的插槽内容包括在一个传入单个参数的函数里,<br>这意味着 v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JavaScript 表达式。你也可以使用 ES2015 解构来传入具体的插槽 prop，如下：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;todo-list v-slot=<span class="string">&quot;&#123; item &#125;&quot;</span>&gt;</span><br><span class="line">  &lt;i <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;fas fa-check&quot;</span>&gt;&lt;/i&gt;</span><br><span class="line">  &lt;span <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;green&quot;</span>&gt;&#123;&#123; item &#125;&#125;&lt;/span&gt;</span><br><span class="line">&lt;/todo-list&gt;</span><br></pre></td></tr></table></figure>

<p>这样可以使模板更简洁，尤其是在该插槽提供了多个 prop 的时候。它同样开启了 prop 重命名等其它可能，例如将 item 重命名为 todo：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;todo-list v-slot=<span class="string">&quot;&#123; item: todo &#125;&quot;</span>&gt;</span><br><span class="line">  &lt;i <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;fas fa-check&quot;</span>&gt;&lt;/i&gt;</span><br><span class="line">  &lt;span <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;green&quot;</span>&gt;&#123;&#123; todo &#125;&#125;&lt;/span&gt;</span><br><span class="line">&lt;/todo-list&gt;</span><br></pre></td></tr></table></figure>

<p>你甚至可以定义后备内容，用于插槽 prop 是 undefined 的情形</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;todo-list v-slot=<span class="string">&quot;&#123; item = &#x27;Placeholder&#x27; &#125;&quot;</span>&gt;</span><br><span class="line">  &lt;i <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;fas fa-check&quot;</span>&gt;&lt;/i&gt;</span><br><span class="line">  &lt;span <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;green&quot;</span>&gt;&#123;&#123; item &#125;&#125;&lt;/span&gt;</span><br><span class="line">&lt;/todo-list&gt;</span><br></pre></td></tr></table></figure>

<h4 id="具名插槽的缩写"><a href="#具名插槽的缩写" class="headerlink" title="具名插槽的缩写"></a>具名插槽的缩写</h4><p>跟 <code>v-on</code> 和 <code>v-bind</code> 一样，<code>v-slot</code> 也有缩写，即把参数之前的所有内容 <code>(v-slot:)</code> 替换为字符 <code>#</code>。例如 <code>v-slot:header</code> 可以被重写为 <code>#header</code>：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">base-layout</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">template</span> #<span class="attr">header</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>Here might be a page title<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">template</span> #<span class="attr">default</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>A paragraph for the main content.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>And another one.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">template</span> #<span class="attr">footer</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>Here&#x27;s some contact info<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">base-layout</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="提供-注入"><a href="#提供-注入" class="headerlink" title="提供/注入"></a>提供/注入</h3><p>如果我们有这样的层次结构：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">Root</span><br><span class="line">└─ TodoList</span><br><span class="line">   ├─ TodoItem</span><br><span class="line">   └─ TodoListFooter</span><br><span class="line">      ├─ ClearTodosButton</span><br><span class="line">      └─ TodoListStatistics</span><br></pre></td></tr></table></figure>

<p>如果要将 todo-items 的长度直接传递给 TodoListStatistics，我们将把这个属性向下传递到层次结构：<code>TodoList -&gt; TodoListFooter -&gt; TodoListStatistics</code>。通过 <code>provide/inject</code> 方法，我们可以直接执行以下操作：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> app = Vue.createApp(&#123;&#125;)</span><br><span class="line"></span><br><span class="line">app.component(<span class="string">&#x27;todo-list&#x27;</span>, &#123;</span><br><span class="line">  data() &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      todos: [<span class="string">&#x27;Feed a cat&#x27;</span>, <span class="string">&#x27;Buy tickets&#x27;</span>]</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  provide: &#123;</span><br><span class="line">    user: <span class="string">&#x27;John Doe&#x27;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;div&gt;</span></span><br><span class="line"><span class="string">      &#123;&#123; todos.length &#125;&#125;</span></span><br><span class="line"><span class="string">      &lt;!-- 模板的其余部分 --&gt;</span></span><br><span class="line"><span class="string">    &lt;/div&gt;</span></span><br><span class="line"><span class="string">  `</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.component(<span class="string">&#x27;todo-list-statistics&#x27;</span>, &#123;</span><br><span class="line">  inject: [<span class="string">&#x27;user&#x27;</span>],</span><br><span class="line">  created() &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">`Injected property: <span class="subst">$&#123;<span class="built_in">this</span>.user&#125;</span>`</span>) <span class="comment">// &gt; 注入 property: John Doe</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>但是，如果我们尝试在此处提供一些组件实例 property，则这将不起作用：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">app.component(<span class="string">&#x27;todo-list&#x27;</span>, &#123;</span><br><span class="line">  data() &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      todos: [<span class="string">&#x27;Feed a cat&#x27;</span>, <span class="string">&#x27;Buy tickets&#x27;</span>]</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  provide: &#123;</span><br><span class="line">    todoLength: <span class="built_in">this</span>.todos.length <span class="comment">// 将会导致错误 &#x27;Cannot read property &#x27;length&#x27; of undefined`</span></span><br><span class="line">  &#125;,</span><br><span class="line">  template: <span class="string">`</span></span><br><span class="line"><span class="string">    ...</span></span><br><span class="line"><span class="string">  `</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>要访问组件实例 property，我们需要将 provide 转换为返回对象的函数</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">app.component(<span class="string">&#x27;todo-list&#x27;</span>, &#123;</span><br><span class="line">  data() &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      todos: [<span class="string">&#x27;Feed a cat&#x27;</span>, <span class="string">&#x27;Buy tickets&#x27;</span>]</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  provide() &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      todoLength: <span class="built_in">this</span>.todos.length</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  template: <span class="string">`</span></span><br><span class="line"><span class="string">    ...</span></span><br><span class="line"><span class="string">  `</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h4 id="处理响应式"><a href="#处理响应式" class="headerlink" title="处理响应式"></a>处理响应式</h4><p>在上面的例子中，如果我们更改了 todos 的列表，这个更改将不会反映在注入的 todoLength property 中。这是因为默认情况下，provide/inject 绑定不是被动绑定。我们可以通过将 ref property 或 reactive 对象传递给 provide 来更改此行为。在我们的例子中，如果我们想对祖先组件中的更改做出反应，我们需要为我们提供的 todoLength 分配一个组合式 API computed property：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">app.component(<span class="string">&#x27;todo-list&#x27;</span>, &#123;</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">  provide() &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      todoLength: Vue.computed(<span class="function">() =&gt;</span> <span class="built_in">this</span>.todos.length)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h3 id="动态组件"><a href="#动态组件" class="headerlink" title="动态组件"></a>动态组件</h3><figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;component :is=<span class="string">&quot;currentTabComponent&quot;</span>&gt;&lt;/component&gt;</span><br></pre></td></tr></table></figure>

<h4 id="keep-alive"><a href="#keep-alive" class="headerlink" title="keep-alive"></a>keep-alive</h4><figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 失活的组件将会被缓存！--&gt;</span><br><span class="line">&lt;keep-alive&gt;</span><br><span class="line">  &lt;component :is=<span class="string">&quot;currentTabComponent&quot;</span>&gt;&lt;/component&gt;</span><br><span class="line">&lt;/keep-alive&gt;</span><br></pre></td></tr></table></figure>

<h3 id="强制更新"><a href="#强制更新" class="headerlink" title="强制更新"></a>强制更新</h3><p>如果你发现自己需要在 Vue 中强制更新，在 99.99%的情况下，你在某个地方犯了错误。例如，你可能依赖于 Vue 响应性系统未跟踪的状态，例如，在组件创建之后添加了 data 属性。</p>
<p>但是，如果你已经排除了上述情况，并且发现自己处于这种非常罕见的情况下，必须手动强制更新，那么你可以使用 $forceUpdate。</p>
<p>#低级静态组件与 v-once</p>
<h3 id="静态组件-v-once"><a href="#静态组件-v-once" class="headerlink" title="静态组件 v-once"></a>静态组件 v-once</h3><p>在 Vue 中渲染纯 HTML 元素的速度非常快，但有时你可能有一个包含很多静态内容的组件。在这些情况下，可以通过向根元素添加 v-once 指令来确保只对其求值一次，然后进行缓存，如下所示：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">app.component(<span class="string">&#x27;terms-of-service&#x27;</span>, &#123;</span><br><span class="line">  template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;div v-once&gt;</span></span><br><span class="line"><span class="string">      &lt;h1&gt;Terms of Service&lt;/h1&gt;</span></span><br><span class="line"><span class="string">      ... a lot of static content ...</span></span><br><span class="line"><span class="string">    &lt;/div&gt;</span></span><br><span class="line"><span class="string">  `</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>再次提醒，不要过度使用这种模式。虽然在极少数情况下需要渲染大量静态内容时很方便，但除非你注意到渲染速度——慢，否则就没有必要这样做—另外，这可能会在以后引起很多混乱。例如，假设另一个开发人员不熟悉 v-once 或者只是在模板中遗漏了它。他们可能会花上几个小时来弄清楚为什么模板没有正确更新。</p>
<h3 id="Mixin-混入"><a href="#Mixin-混入" class="headerlink" title="Mixin 混入"></a>Mixin 混入</h3><p>EX:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> myMixin = &#123;</span><br><span class="line">  created() &#123;</span><br><span class="line">    <span class="built_in">this</span>.hello()</span><br><span class="line">  &#125;,</span><br><span class="line">  methods: &#123;</span><br><span class="line">    hello() &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">&#x27;hello from mixin!&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// define an app that uses this mixin</span></span><br><span class="line"><span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">  mixins: [myMixin]</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.mount(<span class="string">&#x27;#mixins-basic&#x27;</span>) <span class="comment">// =&gt; &quot;hello from mixin!&quot;</span></span><br></pre></td></tr></table></figure>

<h4 id="全局混入"><a href="#全局混入" class="headerlink" title="全局混入"></a>全局混入</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">  myOption: <span class="string">&#x27;hello!&#x27;</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 为自定义的选项 &#x27;myOption&#x27; 注入一个处理器。</span></span><br><span class="line">app.mixin(&#123;</span><br><span class="line">  created() &#123;</span><br><span class="line">    <span class="keyword">const</span> myOption = <span class="built_in">this</span>.$options.myOption</span><br><span class="line">    <span class="keyword">if</span> (myOption) &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(myOption)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.mount(<span class="string">&#x27;#mixins-global&#x27;</span>) <span class="comment">// =&gt; &quot;hello!&quot;</span></span><br></pre></td></tr></table></figure>

<h3 id="自定义指令"><a href="#自定义指令" class="headerlink" title="自定义指令"></a>自定义指令</h3><h4 id="全局"><a href="#全局" class="headerlink" title="全局"></a>全局</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> app = Vue.createApp(&#123;&#125;)</span><br><span class="line"><span class="comment">// 注册一个全局自定义指令 `v-focus`</span></span><br><span class="line">app.directive(<span class="string">&#x27;focus&#x27;</span>, &#123;</span><br><span class="line">  <span class="comment">// 当被绑定的元素插入到 DOM 中时……</span></span><br><span class="line">  mounted(el) &#123;</span><br><span class="line">    <span class="comment">// Focus the element</span></span><br><span class="line">    el.focus()</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h4 id="局部注册"><a href="#局部注册" class="headerlink" title="局部注册"></a>局部注册</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">directives: &#123;</span><br><span class="line">  focus: &#123;</span><br><span class="line">    <span class="comment">// 指令的定义</span></span><br><span class="line">    mounted(el) &#123;</span><br><span class="line">      el.focus()</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="teleport"><a href="#teleport" class="headerlink" title="teleport"></a>teleport</h3><p>使用 <code>&lt;teleport&gt;</code>，并告诉 Vue “Teleport 这个 HTML 到该‘body’标签”。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;teleport to=<span class="string">&quot;body&quot;</span>&gt;</span><br><span class="line">    这将插入到body上</span><br><span class="line">&lt;/teleport&gt;</span><br></pre></td></tr></table></figure>

<p>使用 <code>&lt;teleport&gt;</code>，并告诉 Vue “Teleport 这个 HTML 到‘#wrapper’标签”。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;teleport to=<span class="string">&quot;#wrapper&quot;</span>&gt;</span><br><span class="line">    这将插入到id wrapper 元素上上</span><br><span class="line">&lt;/teleport&gt;</span><br></pre></td></tr></table></figure>

<h3 id="render函数"><a href="#render函数" class="headerlink" title="render函数"></a>render函数</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    data() &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            blogTitle: <span class="string">&#x27;title&#x27;</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    render() &#123;</span><br><span class="line">        <span class="keyword">return</span> Vue.h(<span class="string">&#x27;h1&#x27;</span>, &#123;&#125;, <span class="built_in">this</span>.blogTitle)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="h-函数"><a href="#h-函数" class="headerlink" title="h 函数"></a>h 函数</h4><p>h() 函数是一个用于创建 vnode 的实用程序。也许可以更准确地将其命名为 createVNode()，但由于频繁使用和简洁，它被称为 h() 。它接受三个参数：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// @returns &#123;VNode&#125;</span></span><br><span class="line">h(</span><br><span class="line">  <span class="comment">// &#123;String | Object | Function | null&#125; tag</span></span><br><span class="line">  <span class="comment">// 一个 HTML 标签名、一个组件、一个异步组件，或者 null。</span></span><br><span class="line">  <span class="comment">// 使用 null 将会渲染一个注释。</span></span><br><span class="line">  <span class="comment">//</span></span><br><span class="line">  <span class="comment">// 必需的。</span></span><br><span class="line">  <span class="string">&#x27;div&#x27;</span>,</span><br><span class="line"></span><br><span class="line">  <span class="comment">// &#123;Object&#125; props</span></span><br><span class="line">  <span class="comment">// 与 attribute、prop 和事件相对应的对象。</span></span><br><span class="line">  <span class="comment">// 我们会在模板中使用。</span></span><br><span class="line">  <span class="comment">//</span></span><br><span class="line">  <span class="comment">// 可选的。</span></span><br><span class="line">  &#123;&#125;,</span><br><span class="line"></span><br><span class="line">  <span class="comment">// &#123;String | Array | Object&#125; children</span></span><br><span class="line">  <span class="comment">// 子 VNodes, 使用 `h()` 构建,</span></span><br><span class="line">  <span class="comment">// 或使用字符串获取 &quot;文本 Vnode&quot; 或者</span></span><br><span class="line">  <span class="comment">// 有 slot 的对象。</span></span><br><span class="line">  <span class="comment">//</span></span><br><span class="line">  <span class="comment">// 可选的。</span></span><br><span class="line">  [</span><br><span class="line">    <span class="string">&#x27;Some text comes first.&#x27;</span>,</span><br><span class="line">    h(<span class="string">&#x27;h1&#x27;</span>, <span class="string">&#x27;A headline&#x27;</span>),</span><br><span class="line">    h(MyComponent, &#123;</span><br><span class="line">      someProp: <span class="string">&#x27;foobar&#x27;</span></span><br><span class="line">    &#125;)</span><br><span class="line">  ]</span><br><span class="line">)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="JSX"><a href="#JSX" class="headerlink" title="JSX"></a>JSX</h3><p><a href="https://github.com/vuejs/jsx-next#installation">https://github.com/vuejs/jsx-next#installation</a></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> AnchoredHeading <span class="keyword">from</span> <span class="string">&#x27;./AnchoredHeading.vue&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  el: <span class="string">&#x27;#demo&#x27;</span>,</span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      &lt;AnchoredHeading level=&#123;<span class="number">1</span>&#125;&gt;</span><br><span class="line">        &lt;span&gt;Hello&lt;/span&gt; world!</span><br><span class="line">      &lt;/AnchoredHeading&gt;</span><br><span class="line">    )</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h4 id="install"><a href="#install" class="headerlink" title="install"></a>install</h4><p>Install the plugin with:</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install @vue&#x2F;babel-plugin-jsx -D</span><br></pre></td></tr></table></figure>
<p>Then add the plugin to .babelrc:</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  &quot;plugins&quot;: [&quot;@vue&#x2F;babel-plugin-jsx&quot;]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="function"><a href="#function" class="headerlink" title="function"></a>function</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> App = <span class="function">() =&gt;</span> <span class="xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span>Vue 3.0<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span>;</span><br></pre></td></tr></table></figure>

<h4 id="render"><a href="#render" class="headerlink" title="render"></a>render</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> App = &#123;</span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span>Vue 3.0<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span>;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h4 id="setup"><a href="#setup" class="headerlink" title="setup"></a>setup</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; withModifiers, defineComponent &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> App = defineComponent(&#123;</span><br><span class="line">  setup() &#123;</span><br><span class="line">    <span class="keyword">const</span> count = ref(<span class="number">0</span>);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> inc = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">      count.value++;</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> <span class="function">() =&gt;</span> (</span><br><span class="line">      &lt;div onClick=&#123;withModifiers(inc, [<span class="string">&quot;self&quot;</span>])&#125;&gt;&#123;count.value&#125;&lt;/div&gt;</span><br><span class="line">    );</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h4 id="fragment"><a href="#fragment" class="headerlink" title="fragment"></a>fragment</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">const</span> App = <span class="function">() =&gt;</span> (</span><br><span class="line">  &lt;&gt;</span><br><span class="line">    &lt;span&gt;I<span class="string">&#x27;m&lt;/span&gt;</span></span><br><span class="line"><span class="string">    &lt;span&gt;Fragment&lt;/span&gt;</span></span><br><span class="line"><span class="string">  &lt;/&gt;</span></span><br><span class="line"><span class="string">);</span></span><br></pre></td></tr></table></figure>

<h4 id="Attributes-props"><a href="#Attributes-props" class="headerlink" title="Attributes/props"></a>Attributes/props</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> App = <span class="function">() =&gt;</span> <span class="xml"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;email&quot;</span> /&gt;</span></span>;</span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> placeholderText = <span class="string">&quot;email&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> App = <span class="function">() =&gt;</span> <span class="xml"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;email&quot;</span> <span class="attr">placeholder</span>=<span class="string">&#123;placeholderText&#125;</span> /&gt;</span></span>;</span><br><span class="line"></span><br></pre></td></tr></table></figure>


<h4 id="v-show"><a href="#v-show" class="headerlink" title="v-show"></a>v-show</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> App = &#123;</span><br><span class="line">  data() &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123; <span class="attr">visible</span>: <span class="literal">true</span> &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">input</span> <span class="attr">v-show</span>=<span class="string">&#123;this.visible&#125;</span> /&gt;</span></span>;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h4 id="v-model"><a href="#v-model" class="headerlink" title="v-model"></a>v-model</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;input v-model=&#123;val&#125; /&gt;</span><br></pre></td></tr></table></figure>

<h4 id="v-models"><a href="#v-models" class="headerlink" title="v-models"></a>v-models</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;A v-models=&#123;[[foo], [bar, <span class="string">&quot;bar&quot;</span>]]&#125; /&gt;</span><br></pre></td></tr></table></figure>

<h4 id="slot"><a href="#slot" class="headerlink" title="slot"></a>slot</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> A = <span class="function">(<span class="params">props, &#123; slots &#125;</span>) =&gt;</span> (</span><br><span class="line">  &lt;&gt;</span><br><span class="line">    &lt;h1&gt;&#123; slots.default ? slots.default() : <span class="string">&#x27;foo&#x27;</span> &#125;&lt;/h1&gt;</span><br><span class="line">    &lt;h2&gt;&#123; slots.bar?.() &#125;&lt;/h2&gt;</span><br><span class="line">  &lt;/&gt;</span><br><span class="line">);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> App = &#123;</span><br><span class="line">  setup() &#123;</span><br><span class="line">    <span class="keyword">const</span> slots = &#123;</span><br><span class="line">      bar: <span class="function">() =&gt;</span> <span class="xml"><span class="tag">&lt;<span class="name">span</span>&gt;</span>B<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span>,</span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="keyword">return</span> <span class="function">() =&gt;</span> (</span><br><span class="line">      &lt;A v-slots=&#123;slots&#125;&gt;</span><br><span class="line">        &lt;div&gt;A&lt;/div&gt;</span><br><span class="line">      &lt;/A&gt;</span><br><span class="line">    );</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// or</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> App = &#123;</span><br><span class="line">  setup() &#123;</span><br><span class="line">    <span class="keyword">const</span> slots = &#123;</span><br><span class="line">      <span class="keyword">default</span>: <span class="function">() =&gt;</span> <span class="xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span>A<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span>,</span><br><span class="line">      bar: <span class="function">() =&gt;</span> <span class="xml"><span class="tag">&lt;<span class="name">span</span>&gt;</span>B<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span>,</span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="keyword">return</span> <span class="function">() =&gt;</span> <span class="xml"><span class="tag">&lt;<span class="name">A</span> <span class="attr">v-slots</span>=<span class="string">&#123;slots&#125;</span> /&gt;</span></span>;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// or you can use object slots when `enableObjectSlots` is not false.</span></span><br><span class="line"><span class="keyword">const</span> App = &#123;</span><br><span class="line">  setup() &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="function">() =&gt;</span> (</span><br><span class="line">      &lt;&gt;</span><br><span class="line">        &lt;A&gt;</span><br><span class="line">          &#123;&#123;</span><br><span class="line">            <span class="keyword">default</span>: <span class="function">() =&gt;</span> <span class="xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span>A<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span>,</span><br><span class="line">            bar: <span class="function">() =&gt;</span> <span class="xml"><span class="tag">&lt;<span class="name">span</span>&gt;</span>B<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span>,</span><br><span class="line">          &#125;&#125;</span><br><span class="line">        &lt;/A&gt;</span><br><span class="line">        &lt;B&gt;&#123;<span class="function">() =&gt;</span> <span class="string">&quot;foo&quot;</span>&#125;&lt;/B&gt;</span><br><span class="line">      &lt;/&gt;</span><br><span class="line">    );</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h3 id="composition-Api"><a href="#composition-Api" class="headerlink" title="composition Api"></a>composition Api</h3><h4 id="ref-reactive"><a href="#ref-reactive" class="headerlink" title="ref/reactive"></a>ref/reactive</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; ref &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> counter = ref(<span class="number">0</span>)</span><br></pre></td></tr></table></figure>

<h4 id="生命周期"><a href="#生命周期" class="headerlink" title="生命周期"></a>生命周期</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">beforeMount	onBeforeMount</span><br><span class="line">mounted	onMounted</span><br><span class="line">beforeUpdate	onBeforeUpdate</span><br><span class="line">updated	onUpdated</span><br><span class="line">beforeUnmount	onBeforeUnmount</span><br><span class="line">unmounted	onUnmounted</span><br><span class="line">errorCaptured	onErrorCaptured</span><br><span class="line">renderTracked	onRenderTracked</span><br><span class="line">renderTriggered	onRenderTriggered</span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// src/components/UserRepositories.vue `setup` function</span></span><br><span class="line"><span class="keyword">import</span> &#123; fetchUserRepositories &#125; <span class="keyword">from</span> <span class="string">&#x27;@/api/repositories&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; ref, onMounted &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// in our component</span></span><br><span class="line">setup (props) &#123;</span><br><span class="line">  <span class="keyword">const</span> repositories = ref([])</span><br><span class="line">  <span class="keyword">const</span> getUserRepositories = <span class="keyword">async</span> () =&gt; &#123;</span><br><span class="line">    repositories.value = <span class="keyword">await</span> fetchUserRepositories(props.user)</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  onMounted(getUserRepositories) <span class="comment">// on `mounted` call `getUserRepositories`</span></span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> &#123;</span><br><span class="line">    repositories,</span><br><span class="line">    getUserRepositories</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="监听watch"><a href="#监听watch" class="headerlink" title="监听watch"></a>监听watch</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; ref, watch &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> counter = ref(<span class="number">0</span>)</span><br><span class="line">watch(counter, <span class="function">(<span class="params">newValue, oldValue</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;The new counter value is: &#x27;</span> + counter.value)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h4 id="toRefs"><a href="#toRefs" class="headerlink" title="toRefs"></a>toRefs</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; fetchUserRepositories &#125; <span class="keyword">from</span> <span class="string">&#x27;@/api/repositories&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; ref, onMounted, watch, toRefs &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 在我们组件中</span></span><br><span class="line">setup (props) &#123;</span><br><span class="line">  <span class="comment">// 使用 `toRefs` 创建对prop的 `user` property 的响应式引用</span></span><br><span class="line">  <span class="keyword">const</span> &#123; user &#125; = toRefs(props)</span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> repositories = ref([])</span><br><span class="line">  <span class="keyword">const</span> getUserRepositories = <span class="keyword">async</span> () =&gt; &#123;</span><br><span class="line">    <span class="comment">// 更新 `prop.user` 到 `user.value` 访问引用值</span></span><br><span class="line">    repositories.value = <span class="keyword">await</span> fetchUserRepositories(user.value)</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  onMounted(getUserRepositories)</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 在用户 prop 的响应式引用上设置一个侦听器</span></span><br><span class="line">  watch(user, getUserRepositories)</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> &#123;</span><br><span class="line">    repositories,</span><br><span class="line">    getUserRepositories</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="computed"><a href="#computed" class="headerlink" title="computed"></a>computed</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; ref, computed &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> counter = ref(<span class="number">0</span>)</span><br><span class="line"><span class="keyword">const</span> twiceTheCounter = computed(<span class="function">() =&gt;</span> counter.value * <span class="number">2</span>)</span><br><span class="line"></span><br><span class="line">counter.value++</span><br><span class="line"><span class="built_in">console</span>.log(counter.value) <span class="comment">// 1</span></span><br><span class="line"><span class="built_in">console</span>.log(twiceTheCounter.value) <span class="comment">// 2</span></span><br></pre></td></tr></table></figure>

<h4 id="提供-注入-1"><a href="#提供-注入-1" class="headerlink" title="提供/注入"></a>提供/注入</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// provider</span></span><br><span class="line"><span class="keyword">import</span> &#123; provide &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> MyMarker <span class="keyword">from</span> <span class="string">&#x27;./MyMarker.vue</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">export default &#123;</span></span><br><span class="line"><span class="string">  components: &#123;</span></span><br><span class="line"><span class="string">    MyMarker</span></span><br><span class="line"><span class="string">  &#125;,</span></span><br><span class="line"><span class="string">  setup() &#123;</span></span><br><span class="line"><span class="string">    provide(&#x27;</span>location<span class="string">&#x27;, &#x27;</span>North Pole<span class="string">&#x27;)</span></span><br><span class="line"><span class="string">    provide(&#x27;</span>geolocation<span class="string">&#x27;, &#123;</span></span><br><span class="line"><span class="string">      longitude: 90,</span></span><br><span class="line"><span class="string">      latitude: 135</span></span><br><span class="line"><span class="string">    &#125;)</span></span><br><span class="line"><span class="string">  &#125;</span></span><br><span class="line"><span class="string">&#125;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">// inject</span></span><br><span class="line"><span class="string">import &#123; inject &#125; from &#x27;</span>vue<span class="string">&#x27;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">export default &#123;</span></span><br><span class="line"><span class="string">  setup() &#123;</span></span><br><span class="line"><span class="string">    const userLocation = inject(&#x27;</span>location<span class="string">&#x27;, &#x27;</span>The Universe<span class="string">&#x27;)</span></span><br><span class="line"><span class="string">    const userGeolocation = inject(&#x27;</span>geolocation<span class="string">&#x27;)</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">    return &#123;</span></span><br><span class="line"><span class="string">      userLocation,</span></span><br><span class="line"><span class="string">      userGeolocation</span></span><br><span class="line"><span class="string">    &#125;</span></span><br><span class="line"><span class="string">  &#125;</span></span><br><span class="line"><span class="string">&#125;</span></span><br><span class="line"><span class="string"></span></span><br></pre></td></tr></table></figure>

<h5 id="添加响应式"><a href="#添加响应式" class="headerlink" title="添加响应式"></a>添加响应式</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; provide, reactive, ref &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> MyMarker <span class="keyword">from</span> <span class="string">&#x27;./MyMarker.vue</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">export default &#123;</span></span><br><span class="line"><span class="string">  components: &#123;</span></span><br><span class="line"><span class="string">    MyMarker</span></span><br><span class="line"><span class="string">  &#125;,</span></span><br><span class="line"><span class="string">  setup() &#123;</span></span><br><span class="line"><span class="string">    const location = ref(&#x27;</span>North Pole<span class="string">&#x27;)</span></span><br><span class="line"><span class="string">    const geolocation = reactive(&#123;</span></span><br><span class="line"><span class="string">      longitude: 90,</span></span><br><span class="line"><span class="string">      latitude: 135</span></span><br><span class="line"><span class="string">    &#125;)</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">    provide(&#x27;</span>location<span class="string">&#x27;, location)</span></span><br><span class="line"><span class="string">    provide(&#x27;</span>geolocation<span class="string">&#x27;, geolocation)</span></span><br><span class="line"><span class="string">  &#125;</span></span><br><span class="line"><span class="string">&#125;</span></span><br></pre></td></tr></table></figure>

<h5 id="修改响应式-property"><a href="#修改响应式-property" class="headerlink" title="修改响应式 property"></a>修改响应式 property</h5><p>有时我们需要在注入数据的组件内部更新注入的数据。在这种情况下，我们建议提供一个方法来负责改变响应式 property。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Provider</span></span><br><span class="line"><span class="keyword">import</span> &#123; provide, reactive, ref &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> MyMarker <span class="keyword">from</span> <span class="string">&#x27;./MyMarker.vue</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">export default &#123;</span></span><br><span class="line"><span class="string">  components: &#123;</span></span><br><span class="line"><span class="string">    MyMarker</span></span><br><span class="line"><span class="string">  &#125;,</span></span><br><span class="line"><span class="string">  setup() &#123;</span></span><br><span class="line"><span class="string">    const location = ref(&#x27;</span>North Pole<span class="string">&#x27;)</span></span><br><span class="line"><span class="string">    const geolocation = reactive(&#123;</span></span><br><span class="line"><span class="string">      longitude: 90,</span></span><br><span class="line"><span class="string">      latitude: 135</span></span><br><span class="line"><span class="string">    &#125;)</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">    const updateLocation = () =&gt; &#123;</span></span><br><span class="line"><span class="string">      location.value = &#x27;</span>South Pole<span class="string">&#x27;</span></span><br><span class="line"><span class="string">    &#125;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">    provide(&#x27;</span>location<span class="string">&#x27;, location)</span></span><br><span class="line"><span class="string">    provide(&#x27;</span>geolocation<span class="string">&#x27;, geolocation)</span></span><br><span class="line"><span class="string">    provide(&#x27;</span>updateLocation<span class="string">&#x27;, updateLocation)</span></span><br><span class="line"><span class="string">  &#125;</span></span><br><span class="line"><span class="string">&#125;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">// inject</span></span><br><span class="line"><span class="string">import &#123; inject &#125; from &#x27;</span>vue<span class="string">&#x27;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">export default &#123;</span></span><br><span class="line"><span class="string">  setup() &#123;</span></span><br><span class="line"><span class="string">    const userLocation = inject(&#x27;</span>location<span class="string">&#x27;, &#x27;</span>The Universe<span class="string">&#x27;)</span></span><br><span class="line"><span class="string">    const userGeolocation = inject(&#x27;</span>geolocation<span class="string">&#x27;)</span></span><br><span class="line"><span class="string">    const updateUserLocation = inject(&#x27;</span>updateLocation<span class="string">&#x27;)</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">    return &#123;</span></span><br><span class="line"><span class="string">      userLocation,</span></span><br><span class="line"><span class="string">      userGeolocation,</span></span><br><span class="line"><span class="string">      updateUserLocation</span></span><br><span class="line"><span class="string">    &#125;</span></span><br><span class="line"><span class="string">  &#125;</span></span><br><span class="line"><span class="string">&#125;</span></span><br></pre></td></tr></table></figure>

<h5 id="只读-readonly"><a href="#只读-readonly" class="headerlink" title="只读 readonly"></a>只读 readonly</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; provide, reactive, readonly, ref &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> MyMarker <span class="keyword">from</span> <span class="string">&#x27;./MyMarker.vue</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">export default &#123;</span></span><br><span class="line"><span class="string">  components: &#123;</span></span><br><span class="line"><span class="string">    MyMarker</span></span><br><span class="line"><span class="string">  &#125;,</span></span><br><span class="line"><span class="string">  setup() &#123;</span></span><br><span class="line"><span class="string">    const location = ref(&#x27;</span>North Pole<span class="string">&#x27;)</span></span><br><span class="line"><span class="string">    const geolocation = reactive(&#123;</span></span><br><span class="line"><span class="string">      longitude: 90,</span></span><br><span class="line"><span class="string">      latitude: 135</span></span><br><span class="line"><span class="string">    &#125;)</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">    const updateLocation = () =&gt; &#123;</span></span><br><span class="line"><span class="string">      location.value = &#x27;</span>South Pole<span class="string">&#x27;</span></span><br><span class="line"><span class="string">    &#125;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">    provide(&#x27;</span>location<span class="string">&#x27;, readonly(location))</span></span><br><span class="line"><span class="string">    provide(&#x27;</span>geolocation<span class="string">&#x27;, readonly(geolocation))</span></span><br><span class="line"><span class="string">    provide(&#x27;</span>updateLocation<span class="string">&#x27;, updateLocation)</span></span><br><span class="line"><span class="string">  &#125;</span></span><br><span class="line"><span class="string">&#125;</span></span><br></pre></td></tr></table></figure>

<h4 id="使用JSX"><a href="#使用JSX" class="headerlink" title="使用JSX"></a>使用JSX</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  setup() &#123;</span><br><span class="line">    <span class="keyword">const</span> root = ref(<span class="literal">null</span>)</span><br><span class="line"></span><br><span class="line">    <span class="comment">// with JSX</span></span><br><span class="line">    <span class="keyword">return</span> <span class="function">() =&gt;</span> <span class="xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">ref</span>=<span class="string">&#123;root&#125;</span> /&gt;</span></span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></section>
    <!-- Tags START -->
    
      <div class="tags">
        <span>Tags:</span>
        
  <a href="/tags#vue3.0" >
    <span class="tag-code">vue3.0</span>
  </a>

  <a href="/tags#composition Api" >
    <span class="tag-code">composition Api</span>
  </a>

  <a href="/tags#JSX" >
    <span class="tag-code">JSX</span>
  </a>

      </div>
    
    <!-- Tags END -->
    <!-- NAV START -->
    
  <div class="nav-container">
    <!-- reverse left and right to put prev and next in a more logic postition -->
    
      <a class="nav-left" href="/2021/01/20/react-%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/">
        <span class="nav-arrow">← </span>
        
          react 性能优化
        
      </a>
    
    
      <a class="nav-right" href="/2021/12/14/gitlab%E6%90%AD%E5%BB%BA/">
        
          gitlab搭建
        
        <span class="nav-arrow"> →</span>
      </a>
    
  </div>

    <!-- NAV END -->
    <!-- 打赏 START -->
    
      <div class="money-like">
        <div class="reward-btn">
          赏
          <span class="money-code">
            <span class="alipay-code">
              <div class="code-image"></div>
              <b>使用支付宝打赏</b>
            </span>
            <span class="wechat-code">
              <div class="code-image"></div>
              <b>使用微信打赏</b>
            </span>
          </span>
        </div>
        <p class="notice">若你觉得我的文章对你有帮助，欢迎点击上方按钮对我打赏</p>
      </div>
    
    <!-- 打赏 END -->
    <!-- 二维码 START -->
    
      <div class="qrcode">
        <canvas id="share-qrcode"></canvas>
        <p class="notice">扫描二维码，分享此文章</p>
      </div>
    
    <!-- 二维码 END -->
    
      <!-- No Comment -->
    
  </article>
  <!-- Article END -->
  <!-- Catalog START -->
  
    <aside class="catalog-container">
  <div class="toc-main">
    <strong class="toc-title">Catalog</strong>
    
      <ol class="toc-nav"><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#%E6%8F%92%E6%A7%BD"><span class="toc-nav-text">插槽</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#%E5%90%8E%E5%A4%87%E5%86%85%E5%AE%B9"><span class="toc-nav-text">后备内容</span></a></li><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#%E5%85%B7%E5%90%8D%E6%8F%92%E6%A7%BD"><span class="toc-nav-text">具名插槽</span></a></li><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD"><span class="toc-nav-text">作用域插槽</span></a></li><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#%E7%BB%93%E6%9E%84%E6%8F%92%E6%A7%BDprop"><span class="toc-nav-text">结构插槽prop</span></a></li><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#%E5%85%B7%E5%90%8D%E6%8F%92%E6%A7%BD%E7%9A%84%E7%BC%A9%E5%86%99"><span class="toc-nav-text">具名插槽的缩写</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#%E6%8F%90%E4%BE%9B-%E6%B3%A8%E5%85%A5"><span class="toc-nav-text">提供&#x2F;注入</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#%E5%A4%84%E7%90%86%E5%93%8D%E5%BA%94%E5%BC%8F"><span class="toc-nav-text">处理响应式</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6"><span class="toc-nav-text">动态组件</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#keep-alive"><span class="toc-nav-text">keep-alive</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#%E5%BC%BA%E5%88%B6%E6%9B%B4%E6%96%B0"><span class="toc-nav-text">强制更新</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#%E9%9D%99%E6%80%81%E7%BB%84%E4%BB%B6-v-once"><span class="toc-nav-text">静态组件 v-once</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#Mixin-%E6%B7%B7%E5%85%A5"><span class="toc-nav-text">Mixin 混入</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#%E5%85%A8%E5%B1%80%E6%B7%B7%E5%85%A5"><span class="toc-nav-text">全局混入</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4"><span class="toc-nav-text">自定义指令</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#%E5%85%A8%E5%B1%80"><span class="toc-nav-text">全局</span></a></li><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#%E5%B1%80%E9%83%A8%E6%B3%A8%E5%86%8C"><span class="toc-nav-text">局部注册</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#teleport"><span class="toc-nav-text">teleport</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#render%E5%87%BD%E6%95%B0"><span class="toc-nav-text">render函数</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#h-%E5%87%BD%E6%95%B0"><span class="toc-nav-text">h 函数</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#JSX"><span class="toc-nav-text">JSX</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#install"><span class="toc-nav-text">install</span></a></li><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#function"><span class="toc-nav-text">function</span></a></li><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#render"><span class="toc-nav-text">render</span></a></li><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#setup"><span class="toc-nav-text">setup</span></a></li><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#fragment"><span class="toc-nav-text">fragment</span></a></li><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#Attributes-props"><span class="toc-nav-text">Attributes&#x2F;props</span></a></li><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#v-show"><span class="toc-nav-text">v-show</span></a></li><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#v-model"><span class="toc-nav-text">v-model</span></a></li><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#v-models"><span class="toc-nav-text">v-models</span></a></li><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#slot"><span class="toc-nav-text">slot</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#composition-Api"><span class="toc-nav-text">composition Api</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#ref-reactive"><span class="toc-nav-text">ref&#x2F;reactive</span></a></li><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F"><span class="toc-nav-text">生命周期</span></a></li><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#%E7%9B%91%E5%90%ACwatch"><span class="toc-nav-text">监听watch</span></a></li><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#toRefs"><span class="toc-nav-text">toRefs</span></a></li><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#computed"><span class="toc-nav-text">computed</span></a></li><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#%E6%8F%90%E4%BE%9B-%E6%B3%A8%E5%85%A5-1"><span class="toc-nav-text">提供&#x2F;注入</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-5"><a class="toc-nav-link" href="#%E6%B7%BB%E5%8A%A0%E5%93%8D%E5%BA%94%E5%BC%8F"><span class="toc-nav-text">添加响应式</span></a></li><li class="toc-nav-item toc-nav-level-5"><a class="toc-nav-link" href="#%E4%BF%AE%E6%94%B9%E5%93%8D%E5%BA%94%E5%BC%8F-property"><span class="toc-nav-text">修改响应式 property</span></a></li><li class="toc-nav-item toc-nav-level-5"><a class="toc-nav-link" href="#%E5%8F%AA%E8%AF%BB-readonly"><span class="toc-nav-text">只读 readonly</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#%E4%BD%BF%E7%94%A8JSX"><span class="toc-nav-text">使用JSX</span></a></li></ol></li></ol>
    
  </div>
</aside>
  
  <!-- Catalog END -->
</main>

<script>
  (function () {
    var url = 'https://github.com/alongithub/2021/06/12/vue3-0语法/';
    var banner = ''
    if (banner !== '' && banner !== 'undefined' && banner !== 'null') {
      $('#article-banner').css({
        'background-image': 'url(' + banner + ')'
      })
    } else {
      $('#article-banner').geopattern(url)
    }
    $('.header').removeClass('fixed-header')

    // error image
    $(".markdown-content img").on('error', function() {
      $(this).attr('src', '/css/images/error_icon.png')
      $(this).css({
        'cursor': 'default'
      })
    })

    // zoom image
    $(".markdown-content img").on('click', function() {
      var src = $(this).attr('src')
      if (src !== '/css/images/error_icon.png') {
        var imageW = $(this).width()
        var imageH = $(this).height()

        var zoom = ($(window).width() * 0.95 / imageW).toFixed(2)
        zoom = zoom < 1 ? 1 : zoom
        zoom = zoom > 2 ? 2 : zoom
        var transY = (($(window).height() - imageH) / 2).toFixed(2)

        $('body').append('<div class="image-view-wrap"><div class="image-view-inner"><img src="'+ src +'" /></div></div>')
        $('.image-view-wrap').addClass('wrap-active')
        $('.image-view-wrap img').css({
          'width': `${imageW}`,
          'transform': `translate3d(0, ${transY}px, 0) scale3d(${zoom}, ${zoom}, 1)`
        })
        $('html').css('overflow', 'hidden')

        $('.image-view-wrap').on('click', function() {
          $(this).remove()
          $('html').attr('style', '')
        })
      }
    })
  })();
</script>


  <script>
    var qr = new QRious({
      element: document.getElementById('share-qrcode'),
      value: document.location.href
    });
  </script>






    <div class="scroll-top">
  <span class="arrow-icon"></span>
</div>
    <footer class="app-footer">
  <p class="copyright">
    Copyright&copy; 2019-2022 along
    <br>
    <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2020044791号-1</a>
    <!-- <br>
    Theme by <a href="https://github.com/alongithub">alongithub</a>
     -->
  </p>
</footer>

<script>
  function async(u, c) {
    var d = document, t = 'script',
      o = d.createElement(t),
      s = d.getElementsByTagName(t)[0];
    o.src = u;
    if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
    s.parentNode.insertBefore(o, s);
  }
</script>
<script>
  async("/cdn.along/fastclick/1.0.6/fastclick.min.js", function(){
    FastClick.attach(document.body);
  })
</script>

<script>
  var hasLine = 'true';
  async("/cdn.along/highlight.js/9.12.0/highlight.min.js", function(){
    $('figure pre').each(function(i, block) {
      var figure = $(this).parents('figure');
      if (hasLine === 'false') {
        figure.find('.gutter').hide();
      }
      hljs.configure({useBR: true});
      var lang = figure.attr('class').split(' ')[1] || 'code';
      var codeHtml = $(this).html();
      var codeTag = document.createElement('code');
      codeTag.className = lang;
      codeTag.innerHTML = codeHtml;
      $(this).attr('class', '').empty().html(codeTag);
      figure.attr('data-lang', lang.toUpperCase());
      hljs.highlightBlock(block);
    });
  })
</script>
<!-- Baidu Tongji -->


<script src="/js/script.js"></script>


  </body>
</html>